<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="../css/tests.css">
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
        <script src="../../../dist/js/epoch.js"></script>
        <script src="../js/data.js"></script>
        <link rel="stylesheet" type="text/css" href="../../../dist/css/epoch.css">
        <style>
        body { background: #333; color: #d0d0d0; }
        a:link, a:visited { color: white; color: white; }
        </style>
    </head>
    <body class="epoch-theme-dark">
        <h1>Basic Chart Options and Events</h1>
        <p class="breadcrumbs"><a href="../index.html">Epoch Chart Tests</a> &raquo; Basic Chart Options and Events</p>
        <ol>
            <li><a href="#test-1">Axes</a></li>
            <li><a href="#test-2">Margins</a></li>
            <li><a href="#test-3">Ticks and Tick Formats</a></li>
            <li><a href="#test-4">Resize</a></li>
            <li><a href="#test-5">Domain</a></li>
            <li><a href="#test-6">Range</a></li>
        </ol>

        <!-- Test 1 -->
        <div id="test-1" class="test">
            <h2>1. Axes</h2>
            <p>
                Correctly add and remove axes when options are set.
            </p>
            <div class="epoch"></div>
            <div class="controls">
                <button data-index="0">All</button>
                <button data-index="1">[left, right]</button>
                <button data-index="2">[top, bottom]</button>
                <button data-index="3">[left, bottom]</button>
                <button data-index="4">[top, right]</button>
                <button data-index="5">None</button>
            </div>
        </div>
        <script>
        $(function() {
            var axes = [
                ['top', 'left', 'bottom', 'right'],
                ['left', 'right'],
                ['top', 'bottom'],
                ['left', 'bottom'],
                ['top', 'right'],
                []
            ];

            var chart = $('#test-1 .epoch').epoch({ 
                type: 'line', 
                data: data().add(function(x) { return Math.cos(x) }).get([0, 2*Math.PI], Math.PI/25)
            });

            $('#test-1 button').click(function(e) {
                chart.option('axes', axes[parseInt($(e.target).attr('data-index'))]);
            });
        });
        </script>


        <!-- Test 2 -->
        <div id="test-2" class="test">
            <h2>2. Margins</h2>
            <p>
                Correctly resize margins when options are set.
            </p>
            <div class="epoch"></div>
            <div class="controls">
                <button data-index="0">No Margins</button>
                <button data-index="1">Big Margins</button>
                <button data-index="2">Small Margins</button>
            </div>
        </div>
        <script>
        $(function() {
            var sizes = [
                {margins: {top: null, left: null, bottom: null, right: null }},
                {margins: {top: 60, left: 60, bottom: 60, right: 60 }},
                {margins: {top: 20, left: 20, bottom: 20, right: 20 }}
            ];

            var chart = $('#test-2 .epoch').epoch({ 
                type: 'line', 
                data: data().add(function(x) { return Math.sin(x); })
                            .add(function(x) { return Math.cos(x); })
                            .get([0, 2*Math.PI], Math.PI/25),
                axes: []
            });

            $('#test-2 button').click(function(e) {
                var margins = sizes[parseInt($(e.target).attr('data-index'))];
                console.log(margins);
                chart.option(margins);
            });
        });
        </script>

        <!-- Test 3 -->
        <div id="test-3" class="test">
            <h2>3. Ticks and Tick Formats</h2>
            <p>
                Correctly resize margins when options are set.
            </p>
            <div class="epoch"></div>
            <div class="controls">
                <button class="ticks">Toggle Ticks</button>
                <button class="tickFormats">Toggle Tick Formats</button>
            </div>
        </div>
        <script>
        $(function() {
            var ticksIndex = 0, ticks = [
                { 
                    ticks: {
                        top: 14,
                        bottom: 14,
                        left: 5,
                        right: 5,
                    }
                },
                {
                    ticks: {
                        top: 30,
                        left: 2,
                        bottom: 30,
                        right: 2
                    }
                }
            ];

            var tickFormatsIndex = 0, tickFormats = [
                {
                    tickFormats: {
                        top: Epoch.Formats.regular,
                        bottom: Epoch.Formats.regular,
                        left: Epoch.Formats.si,
                        right: Epoch.Formats.si
                    }
                },
                {
                    tickFormats: {
                        top: function(d) { return parseInt(100*d)+'%' },
                        bottom: function(d) { return parseInt(100*d)+'%' },
                        left: function(d) { return parseInt(100*d)+'%' },
                        right: function(d) { return parseInt(100*d)+'%' }
                    }
                }
            ];

            var chart = $('#test-3 .epoch').epoch({ 
                type: 'area', 
                data: data().add(function(x) { return (Math.sin(x)+1) / (x+1); })
                            .add(function(x) { return (Math.cos(x)+1) / (x+2); })
                            .get([0, 2*Math.PI], Math.PI/25),
                axes: ['top', 'left', 'right', 'bottom']
            });

            $('#test-3 button.ticks').click(function(e) {
                ticksIndex = (ticksIndex + 1) % ticks.length;
                chart.option(ticks[ticksIndex]);
            });

            $('#test-3 button.tickFormats').click(function(e) {
                tickFormatsIndex = (tickFormatsIndex + 1) % tickFormats.length;
                chart.option(tickFormats[tickFormatsIndex]);
            });
        });
        </script>

        <!-- Test 4 -->
        <div id="test-4" class="test">
            <h2>4. Resize</h2>
            <p>
                Correctly resize the chart when the width and height options are set.
            </p>
            <div class="epoch" style="width: 600px; height: 200px"></div>
            <div class="controls">
                <button data-index="0">Original</button>
                <button data-index="1">Bigger</button>
            </div>
        </div>
        <script>
        $(function() {
            var sizes = [
                [600, 200],
                [800, 320]
            ];

            var chart = $('#test-4 .epoch').epoch({
                type: 'line',
                data: data().add(function(x) { return Math.sin(x) }).get([0, 2*Math.PI], Math.PI/25)
            });

            $('#test-4 button').click(function(e) {
                var index = parseInt($(e.target).attr('data-index'));
                chart.option('width', sizes[index][0]);
                chart.option('height', sizes[index][1]);
            });
        });
        </script>

        <!-- Test 5 -->
        <div id="test-5" class="test">
            <h2>6. Option: domain</h2>
            <div class="epoch"></div>
            <p>
                <button data-index="0">Domain From Data Extent</button>
                <button data-index="1">[0, &pi;]</button>
            </p>
        </div>
        <script>
        $(function() {
            var domains = [
                null,
                [0, Math.PI]
            ];

            var chart = $('#test-5 .epoch').epoch({
                type: 'line',
                data: data().add(function(x) { return 1 - Math.sin(x) }).get([0, 2*Math.PI], Math.PI/25)
            });

            $('#test-5 button').click(function(e) {
                var index = parseInt($(e.target).attr('data-index'));
                chart.option('domain', domains[index])
            });
        });
        </script>


        <!-- Test 6 -->
        <div id="test-6" class="test">
            <h2>7. Option: range</h2>
            <div class="epoch"></div>
            <p>
                <button data-index="0">Range From Data Extent</button>
                <button data-index="1">[0, 1.5]</button>
            </p>
        </div>
        <script>
        $(function() {
            var ranges = [
                null,
                [0, 1.5]
            ];

            var chart = $('#test-6 .epoch').epoch({
                type: 'area',
                data: data().add(function(x) { return 1 - Math.cos(x) }).get([0, 2*Math.PI], Math.PI/25)
            });

            $('#test-6 button').click(function(e) {
                var index = parseInt($(e.target).attr('data-index'));
                console.log(ranges[index]);
                chart.option('range', ranges[index])

            });
        });
        </script>

    </body>
</html>